<template>
	<view class="teamRecord">
		<view class="teamRecordBox">
			<view class="teamListTitle">团队奖励</view>
			<view class="reward">
				<view class="flex">
					<view class="menu">
						<view class="val">
							<view>订单数量</view>
							<view class="text"><text>{{teamInfo.orderTotal}}</text></view>
						</view>
					</view>
				</view>
				<view class="flex">
					<view class="menu">
						<view class="val">
							<view>订单金额</view>
							<view class="text"><text>{{teamInfo.totalAmount}}</text>元</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 20rpx;"></view>
		<view class="teamRecordBox">
			<view class="teamListTitle">团队所有订单流水</view>
			<view v-if="teamList.length > 0">
				<view class="ul">
					<view class="li" v-for="(item,index) in teamList" :key="index" @click="teamCheck(item.check,index)">
						<view class="label">
							奖励金额
						</view>
						<view class="val">
							￥{{item.distributeAmount}}
							<tui-icon name="arrowdown" size="16" color="#111" v-if="!item.check"></tui-icon>
							<tui-icon name="arrowup" size="16" color="#111" v-else></tui-icon>
						</view>
						<view style="clear: both;"></view>
						<view class="list" v-if="item.check">
							<view class="cont">
								<view>订单号</view>
								<view>{{item.orderNo}}</view>
							</view>
							<view class="cont">
								<view>订单金额</view>
								<view>￥{{item.orderNoAmount}}</view>
							</view>
							<view class="cont">
								<view>订单时间</view>
								<view>{{item.orderDate}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-else-if="teamList.length == 0">
				<tui-no-data style="margin-top: 0rpx;" :imgUrl="imgConfig + 'images/mall/my_course_empty.png'">暂无数据</tui-no-data>
			</view>
		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn" backgroundColor="#f7f7f7"></tui-nomore>
		<!--加载loadding-->
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	const app = getApp()
	export default {
		name: '',
		components: {

		},
		props: {

		},
		data() {
			return {
				imgConfig: util.domainImg,
				teamInfo: {}, // 团队信息
				teamList: [], // 团队列表
				teamUserId: "",
				current: 1,
				pages: '',
				loadding: false,
				pullUpOn: true,

			};
		},
		computed: {

		},
		watch: {

		},
		onLoad(options) {
			if (options.id) {
				this.teamUserId = options.id;
				this.getList();
			}
		},
		onShow() {

		},
		onPullDownRefresh: function() {
			this.current = 1;
			this.pullUpOn = true;
			this.loadding = false;
			this.getList();
			uni.stopPullDownRefresh();
		},
		onReachBottom: function() {
			this.loadding = true;
			if (this.current == this.pages) {
				this.loadding = false;
				this.pullUpOn = false;
			} else {
				this.getList(true);
				this.loadding = false;
			}
		},
		methods: {
			// 查看团队信息
			teamCheck(check,index) {
				this.teamList[index].check = !check;
			},
			// 获取团队信息
			getTeamInfo() {
				util.request('my/distributeDetailStatics', {
					teamUserId: this.teamUserId
				}, 'POST').then(res => {
					if (res.code == 0) {
						this.teamInfo = res.data
					}
				});
			},
			// 分享团队列表
			getList(selet_type) {
				let that = this;
				let loadData;
				that.pullUpOn = true;
				if (selet_type) {
					loadData = JSON.parse(JSON.stringify(that.teamList));
					that.current = that.current + 1;
				}
				console.log(this.teamUserId);
				util.request('my/distributeDetailPage', {
					current: that.current,
					size: 15,
					teamUserId: this.teamUserId
				}, 'POST').then(res => {
					if (res.code == 0) {
						this.getTeamInfo()
						// console.log(res.data);
						res.data.records.forEach(item=>{
							item.check = false;
						})
						that.teamList = res.data.records
						that.pages = res.data.pages
						if (selet_type) {
							that.teamList = loadData.concat(res.data.records);
						}
					}
				});
			},
		},
	};
</script>

<style lang="scss">
	.teamRecord {
		padding: 20rpx 30rpx;
		.teamRecordBox {
			overflow: hidden;
			border-radius: 16rpx;
			.ul {
				width: 100%;
				.li {
					padding: 20rpx 30rpx 40rpx;
					color: #111;
					background: #fff;
					.label {
						float: left;
						font-size: 28rpx;
					}
					.val {
						float: right;
						font-size: 30rpx;
					}
					.list {
						width: 100%;
						padding: 20rpx 30rpx;
						border-radius: 16rpx;
						background: #f7f7f7;
						margin-top: 20rpx;
						.cont {
							display: flex;
							align-items: center;
							justify-content: space-between;
							height: 60rpx;
							font-size: 26rpx;
						}
					}
				}
			}
		}
		.reward {
			margin-top: -30rpx;
		}
		.mid {
			padding-top: 50rpx;

			.tui-btn {
				margin-bottom: 30rpx !important;
			}
		}
	}
</style>
